import React, { memo } from "react";
import useAppStore from "../../store";

const HomeSvg = ({ active }) => (
  <svg width="14" height="14" viewBox="0 0 14 14">
    <g transform="translate(-58 -12)">
      <g className="a" fill="transparent" transform="translate(58 12)">
        <rect className="c" width="14" height="14" />
        <rect className="d" x="0.5" y="0.5" width="13" height="13" />
      </g>
      <path
        className="b"
        fill={active == "home" ? "#4978FE" : "#999"}
        d="M114,104.214l5.111,3.669a1.917,1.917,0,0,1,.8,1.557v5.916a1.917,1.917,0,0,1-1.917,1.917H115.38v-2.788a2.091,2.091,0,1,0-4.182,0v2.788h-2.614a1.917,1.917,0,0,1-1.917-1.917V109.44a1.917,1.917,0,0,1,.8-1.557l5.112-3.669a1.22,1.22,0,0,1,1.423,0Z"
        transform="translate(-48.289 -91.629)"
      />
    </g>
  </svg>
);

const HomeSvgIcon = memo(() => {
  const active = useAppStore((state) => state.active);
  return (
    <>{active == "home" ? <HomeSvg active={active} /> : <HomeSvg></HomeSvg>}</>
  );
});
export default HomeSvgIcon;
